<template>
	<view class="main-content">
		<u-navbar title="确认订单" back-icon-color="#fff" title-color="#ffffff" :border-bottom="false" :background="{ background: '#1db0fc' }"></u-navbar>
		<view class="head bg-white">
			<navigator v-if="addressShowStatus" class="p-20" hover-class="none" url="/pages/user_address/user_address?type=1">
				<address-item :address="address"></address-item>
			</navigator>
			<view class="select bg-white xs" v-if="orderInfo.pay">
				<view class="left-content">
					<text class="distribution-rule">支付方式</text>
				</view>
				<view class="right-content" @click="pay_type_select_show_status = true">
					<text class="distribution-time" v-text="orderInfo.default_pay_type.name"></text>
					<image class="icon-sm" src="/static/images/arrow_right.png" style="vertical-align: text-top;"></image>
				</view>
			</view>
			<view class="select bg-white xs" v-if="orderInfo.shopping_gold > 0">
				<view class="left-content">
					<text class="distribution-rule">
						购物金 (可抵抗<text style="color: red;">{{orderInfo.shopping_gold}}</text>元)
					</text>
				</view>
				<view class="right-content">
					<u-checkbox @change="shiftShoppingGoldStatus" v-model="orderInfo.shopping_gold_status" :shape="'circle'" active-color="#1db0fc"></u-checkbox>
				</view>
			</view>
		</view>
		<view class="product-lists">
			<view class="product-item bg-white" v-for="(val,key) in lists">
				<view class="merchant-name xs line1" v-html="val.name"></view>
				<u-row class="distribution-mode-selection-area row-between p-20 bg-white">
					<u-col span="4" v-if="val.is_dispatching == 1">
						<view class="item p-20" v-bind:class="{active :val.distribution_type == 1}" @click="switchingDeliveryMode(key,1)">
							<text>同城配送</text>
						</view>
					</u-col>
					<u-col span="4" v-if="val.is_canteen == 1">
						<view class="item p-20" v-bind:class="{active :val.distribution_type == 2}" @click="switchingDeliveryMode(key,2)">
							<text>到店自取</text>
						</view>
					</u-col>
					<u-col span="4" v-if="val.is_expressage == 1">
						<view class="item p-20" v-bind:class="{active :val.distribution_type == 3}"  @click="switchingDeliveryMode(key,3)">
							<text>快递</text>
						</view>
					</u-col>
				</u-row>
				<view class="bg-white ">
					
					<view>
						<!-- 同城配送 -->
						<view class="tab" v-if="val.distribution_type == 1">
							<view class="select bg-white xs">
								<view class="left-content">
									<text class="distribution-rule">预计送达</text>
								</view>
								<view class="right-content" @click="time_select_type = 1;time_select_show_status = true;now_show_date = val.dispatching_information.recent_date; time_select_data = val.dispatching_information.delivery_time;now_select_date.date = val.dispatching_information.recent_date;now_select_date.time = val.dispatching_information.recent_time;now_time_select_merchant_id = val.id">
									<text class="distribution-time" v-if="whetherToday(val.dispatching_information.recent_date)" v-text="'今天' + val.dispatching_information.recent_time"></text>
									<text class="distribution-time" v-else v-text="val.dispatching_information.recent_date + ' ' + val.dispatching_information.recent_time"></text>
									<image class="icon-sm" src="/static/images/arrow_right.png" style="vertical-align: text-top;"></image>
								</view>
							</view>
						</view>
						<!-- 到店自提 -->
						<view class="tab" v-if="val.distribution_type == 2">
							<view class="select bg-white xs">
								<view class="left-content">
									<text class="distribution-rule">自取时间</text>
								</view>
								<view class="right-content" @click="time_select_type = 2;time_select_show_status = true;now_show_date = val.canteen_information.recent_date; time_select_data = val.canteen_information.take_from_oneself_time;now_select_date.date = val.canteen_information.recent_date;now_select_date.time = val.canteen_information.recent_time;now_time_select_merchant_id = val.id">
									<text class="distribution-time" v-if="whetherToday(val.canteen_information.recent_date)" v-text="'今天' + val.canteen_information.recent_time"></text>
									<text class="distribution-time" v-else v-text="val.canteen_information.recent_date + ' ' + val.canteen_information.recent_time"></text>
									<image class="icon-sm" src="/static/images/arrow_right.png" style="vertical-align: text-top;"></image>
								</view>
							</view>
							<view class="select bg-white xs" style="padding: 10rpx 20rpx;">
								<view class="left-content">
									<text class="distribution-rule">联系人姓名</text>
								</view>
								<view class="right-content">
									<u-input placeholder="请输入联系人姓名" v-model="val.canteen_information.name" :input-align="'right'" :height="32" :border="false" />
								</view>
							</view>
							<view class="select bg-white xs" style="padding: 10rpx 20rpx;">
								<view class="left-content">
									<text class="distribution-rule">联系人电话</text>
								</view>
								<view class="right-content">
									<u-input placeholder="请输入联系人电话" v-model="val.canteen_information.phone" :input-align="'right'" :height="32" type="number" :border="false" />
								</view>
							</view>
						</view>
					</view>
					<order-product :list="val.product_lists"></order-product>
					<view class="p-20 xs">
						<view class="item row-between" @tap="showCoupon = true;coupon_lists = val.coupon_lists;now_coupon_select_merchant_key = key">
							<view class="bold">优惠券</view>
							<view class="row">
								<text class="primary" v-if="val.coupon_id">-￥{{val.discount_amount }}</text>
								<text v-if="val.coupon_lists.usableCoupon.length >= 1 && !val.coupon_id" class="primary">{{val.coupon_lists.usableCoupon.length + '张可用'}}</text>
								<text v-if="val.coupon_lists.usableCoupon.length <= 0 && !val.coupon_id" class="muted">无优惠券可用</text>
								<image class="icon-sm ml20" src="/static/images/arrow_right.png"></image>
							</view>
						</view>
						<view class="item row-between">
							<view class="bold">买家留言</view>
							<u-input v-model="val.user_remark" class="flex1 ml20" :clearable="false" placeholder="请添加备注（150字以内）"></u-input>
						</view>
					</view>
					<view class="flex-rl totalbox">
						<view class="yh">
							<view  v-if="val.discount_amount > 0">
								<text class="txt">已优惠</text>
								<text class="fh" style="color: #fd502f;">￥</text>
								<text class="num" style="color: #fd502f;" v-text="val.discount_amount"></text>
							</view>
						</view>
						<view class="total">
							<text class="txt">小计</text>
							<text class="fh">￥</text>
							<text class="num" v-text="val.money"></text>
						</view>
					</view>
				</view>
			</view>
		</view>	
		<view class="footer bg-white row fixed">
			<view class="row" style="position: absolute;right: 16px;">
				<view class="all-price lg ">
					<view class="xs row">
						<text class="bold">合计：</text>
						<view style="color: #fd502f;">
							<price-format :first-size="36" :second-size="36" :price="orderInfo.order_amount"></price-format>
						</view>
					</view>
					<view class="xs"  style="color: #fd502f;" v-if="orderInfo.discount_amount">
						已优惠{{orderInfo.discount_amount}}元
					</view>
				</view>
				<button class="btn br60 white submit-btn" size="md" hover-class="none" @tap="onSubmitOrder">
					提交订单
				</button>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<!-- 支付方式弹窗代码开始 -->
		<u-popup v-model="pay_type_select_show_status" mode="bottom" :safe-area-inset-bottom="true" :closeable="true" :border-radius="16">
			<view class="pay-way contain">
				<view class="lighter title">支付方式</view>
				<radio-group class="radio-group" @change="payTypeChange">
					<label v-for="(item, index) in orderInfo.pay" :key="index" class="item row-between">
						<view class="row">
							<image class="icon-lg mr20" :src="item.icon"></image>
							<view class>
								<view class="balck bt10">{{item.name}}</view>
								<view class="muted xs">{{item.extra}}</view>
							</view>
						</view>
						<radio class="radio" :value="String(item.pay_way)" :checked="item.pay_way == orderInfo.default_pay_type.pay_way"></radio>
					</label>
				</radio-group>
			</view>
		</u-popup>
		<!-- 支付方式弹窗代码结束 -->
		<!-- 时间选择弹窗代码开始 -->
		<u-popup v-model="time_select_show_status" mode="bottom" height="640rpx" border-radius="10">
			<view class="time-select-title" v-html="time_select_type == 1?'请选择期望送达时间':'请选择预计到店时间'"></view>
			<u-row style="height: calc(100% - 40px);" align="top">
				<u-col span="4" class="time-select-date">
					<view class="time-select-date-item" v-bind:class="{'bg-white':key.indexOf(now_show_date) == 0}" v-for="(val,key) in time_select_data" v-html="key" @click="switchoverDate(key)"></view>
				</u-col>
				<u-col span="8" class="time-select-time">
					<view class="time-select-time-item" v-for="(val,key) in time_select_data" v-show="key.indexOf(now_show_date) == 0">
						<u-row v-for="(v,k) in val" @click="switchoverTime(key,v)">
							<u-col span="10" v-html="v">
							</u-col>
							<u-col span="2">
								<u-icon name="checkmark-circle-fill" color="#19be6b" size="28" v-if="key.indexOf(now_select_date.date) == 0  && now_select_date.time == v"></u-icon>
							</u-col>
						</u-row>
					</view>
				</u-col>
			</u-row>
		</u-popup>
		<!-- 时间选择弹窗代码结束 -->
		<!-- 优惠卷选择弹窗代码开始 -->
		<u-popup v-model="showCoupon" border-radius="14" mode="bottom" closeable>
		    <view class="pop-title row-between">
		        <view class="title">优惠券</view>
		    </view>
		    <view v-if="showCoupon">
		       <tabs :active="popActive" :config="{underLineWidth: 100}">
		            <tab :title="'可使用优惠券 (' + coupon_lists.usableCoupon.length + ')'">
		                <coupon-obj :list="coupon_lists.usableCoupon" :type="0" @change="onSelectCoupon" :coupon-id="couponId"></coupon-obj>
		            </tab>
		            <tab :title="'不可用优惠券 (' + coupon_lists.unusableCoupon.length + ')'">
		                <coupon-obj :list="coupon_lists.unusableCoupon" :type="1" @change="onSelectCoupon"></coupon-obj>
		            </tab>
		        </tabs>
		    </view>
		</u-popup>
		<!-- 优惠卷选择弹窗代码结束 -->
	</view>
</template>
<script>
	import {
		wxpay,
		alipay
	} from '@/utils/pay'
	import {
		orderBuy,
		getOrderCoupon
	} from '@/api/order';
	import {
		prepay,
		getMnpNotice,
		getPayway
	} from '@/api/app';
	export default {
		data() {
			return {
				shopping_gold_status:true,
				addressShowStatus:true,
				distributionType:1,
				address:{},
				lists:[],
				orderInfo:[],
				pay_type_select_show_status:false,
				// 时间选择显示状态
				time_select_show_status:false,
				// 选择时间类型 1同城配送 2到店自取 3快递邮寄
				time_select_type:1,
				// 时间选择数据
				time_select_data:[],
				// 当时时间选择信息
				now_select_date:{},
				// 当前展示日期
				now_show_date:'',
				// 当前时间选择门店ID
				now_time_select_merchant_id:0,
				showCoupon:false,
				popActive: 0,
				couponId: 0,
				couponIds: 0,
				now_coupon_select_merchant_key: 0,
				coupon_lists:[],
				use_coupon_lists:[]
			}
		},
		onLoad(options) {
			// this.getPaywayFun()
			uni.$on("selectaddress", (e) => {
				this.addressId = e.id;
			})
			const data = JSON.parse(decodeURIComponent(options.data));
			this.product = data.products
			this.type = data.type
			this.teamId = data.teamId
			this.bargainLaunchId = options.bargain_launch_id
			this.foundId = data.foundId || 0
			// #ifdef H5
			// if(this.isWenXin()){
			// 	_this.popupClose();
			// }
			// #endif
		},
		onShow: async function() {
			// await this.getOrderCouponFun();
			// if (this.payStatus) return;
			setTimeout(() => {
				this.orderBuyFun();
			}, 100)
		},
		methods: {
			shiftShoppingGoldStatus(){
				if(this.orderInfo.shopping_gold_status){
					this.shopping_gold_status = false;
				}else{
					this.shopping_gold_status = true;
				}
				this.orderBuyFun()
			},
			async orderBuyFun(action = 'info') {
				let {
					address,
					userRemark,
					payWay,
					useIntegral,
					bargainLaunchId
				} = this;
				let submitObj = {
					action,
					shopping_gold_status: this.shopping_gold_status,
					products: this.product,
					pay_way: payWay,
					use_integral:useIntegral,
					address_id: this.addressId,
					use_coupon_lists: this.use_coupon_lists,
					bargain_launch_id: this.bargainLaunchId == -1 ? '' : this.bargainLaunchId
				};
				const {
					data: orderData,
					code: orderCode,
					msg: orderMsg,
				} = await orderBuy(submitObj)
				if (action == 'info') {
					let {
						address,
						lists,
						supplier_id,
					} = orderData;
					this.supplier_id = supplier_id
					this.address = address
					this.lists = lists
					this.orderInfo = orderData
					this.checkWhetherAddressDisplayed()
					this.$nextTick(() => {
						this.isFirstLoading = false
					});
				}
			},
			switchingDeliveryMode(key,type){
				this.lists[key].distribution_type = type;
				this.checkWhetherAddressDisplayed()
			},
			checkWhetherAddressDisplayed(){
				var addressShowStatus = false;
				for(var key in this.lists){
					if(this.lists[key].distribution_type != 2){
						addressShowStatus = true;
					}
				}
				this.addressShowStatus = addressShowStatus;
			},
			onSelectCoupon(e) {
				if(e){
					this.use_coupon_lists.push({
						coupon_id:e,
						merchant_id:this.lists[this.now_coupon_select_merchant_key].id,
					})
				}else{
					for(var key in this.use_coupon_lists){
						if(this.use_coupon_lists[key].merchant_id == this.lists[this.now_coupon_select_merchant_key].id){
							delete this.use_coupon_lists[key];
						}
					}
				}
				this.lists[this.now_coupon_select_merchant_key].coupon_id = e;
				this.showCoupon = false
				this.orderBuyFun()
			},
			// 提交订单
			onSubmitOrder(){
				if(this.orderInfo.pay.length <= 0){
					this.$refs.uTips.show({
						title: '管理员尚未配置支付方式',
						type: 'error',
						duration: '2300'
					})
					return false;
				}
				var submitData = {};
				
				submitData.type = this.type;
				
				submitData.shopping_gold_status = this.orderInfo.shopping_gold_status;
				// 默认支付方式
				submitData.pay_type = this.orderInfo.default_pay_type;
				// 设置提示
				submitData.action = 'submit';
				// 订单信息
				submitData.order_information = [];
				
				for(var key in this.lists){
					// 配送方式
					var distribution_type = this.lists[key].distribution_type;
					
					submitData.order_information[key] = {};
					// 门店ID
					submitData.order_information[key].merchant_id = this.lists[key].id;
					// 用户选择配送类型
					submitData.order_information[key].distribution_type = distribution_type;
					// 用户选择的优惠券
					submitData.order_information[key].coupon_id = this.lists[key].coupon_id;
					// 用户输入的备注信息
					submitData.order_information[key].user_remark = this.lists[key].user_remark;
					// 收货信息
					submitData.order_information[key].distribution_information = {};
					if(distribution_type == 1){
						var dispatching_information = this.lists[key].dispatching_information;
						if(dispatching_information.recent_time.length <= 0){
							this.$refs.uTips.show({
								title: '请选择期望送达时间',
								type: 'error',
								duration: '2300'
							})
							return false;
						}
						if(!this.orderInfo.address || this.orderInfo.address.length <= 0){
							this.$refs.uTips.show({
								title: '请选择收货地址',
								type: 'error',
								duration: '2300'
							})
							return false;
						}
						// 同城配送订单加入配送地址
						submitData.order_information[key].distribution_information.address_id = this.orderInfo.address.id;
						// 同城配送订单加入期望送达日期
						submitData.order_information[key].distribution_information.recent_date = dispatching_information.recent_date;
						// 同城配送订单加入期望送达时间
						submitData.order_information[key].distribution_information.recent_time = dispatching_information.recent_time;
					}
					if(distribution_type == 2){
						var canteen_information = this.lists[key].canteen_information;
						if(canteen_information.name.length <= 0 || canteen_information.phone.length <= 0){
							this.$refs.uTips.show({
								title: '请填写自提联系人信息',
								type: 'error',
								duration: '2300'
							})
							return false;
						}
						if(canteen_information.recent_time.length <= 0){
							this.$refs.uTips.show({
								title: '请选择自提时间',
								type: 'error',
								duration: '2300'
							})
							return false;
						}
						// 自提信息加入联系人姓名
						submitData.order_information[key].distribution_information.name = canteen_information.name;
						// 自提信息加入联系人电话
						submitData.order_information[key].distribution_information.phone = canteen_information.phone;
						// 自提信息加入自提日期
						submitData.order_information[key].distribution_information.recent_date = canteen_information.recent_date;
						// 自提信息加入自提时间
						submitData.order_information[key].distribution_information.recent_time = canteen_information.recent_time;
					}
					
					if(distribution_type == 3){
						if(this.address.id.length <= 0){
							this.$refs.uTips.show({
								title: '请选择地址',
								type: 'error',
								duration: '2300'
							})
							return false;
						}
						submitData.order_information[key].addressId = this.address.id;
					}
					
					submitData.order_information[key].products = [];
					
					for(var k in this.lists[key].product_lists){
						
						var product_information= this.lists[key].product_lists[k];
						
						submitData.order_information[key].products[k] = {};
						
						submitData.order_information[key].products[k].product_id = product_information.product_id;
						
						submitData.order_information[key].products[k].item_id = product_information.item_id;
						
						submitData.order_information[key].products[k].product_num = product_information.product_num;
					}
				}
				orderBuy(submitData).then(res => {
					if(res.code == 1){
						var order_sn = res.data.order_sn;
						this.getPayInformation(order_sn,submitData.pay_type)
					}else{
						this.$refs.uTips.show({
							title: res.msg,
							type: 'error',
							duration: '2300'
						})
						return false;
					}
				})
			},
			getPayInformation(order_sn,pay_type){
				var _this = this;
				if(pay_type.code == 'balance'){
					// 余额支付成功
					uni.redirectTo({
						url: '/pages/pay_result/pay_result?sn=' + order_sn
					});
					return false;
				}
				prepay({
					from :'order',
					order_sn :order_sn
				}).then( res => {
					if(res.code == 0){
						_this.$refs.uTips.show({
							title: res.msg,
							type: 'error',
							duration: '2300'
						})
						return false;
					}else{
						if(pay_type.code == 'wechat'){
							wxpay(res.data).then((res) => {
								if(res == 'success') {
									_this.payStatus = true;
									uni.redirectTo({
										url: '/pages/pay_result/pay_result?sn=' + order_sn
									});
								}else {
									uni.redirectTo({
										url: '/pages/user_order/user_order'
									});
								}
							})
						}else if(pay_type.code == 'alipay'){
							alipay(res.data).then((res) => {
								if(res == 'success') {
									_this.payStatus = true;
									uni.redirectTo({
										url: '/pages/pay_result/pay_result?sn=' + order_sn
									});
								}else {
									uni.redirectTo({
										url: '/pages/user_order/user_order'
									});
								}
							})
						}
					}
				})
			},
			// 支付方式改变
			payTypeChange(e){
				for(var key in this.orderInfo.pay){
					if(e.detail.value == this.orderInfo.pay[key].pay_way){
						this.orderInfo.default_pay_type.name = this.orderInfo.pay[key].name;
						this.orderInfo.default_pay_type.code = this.orderInfo.pay[key].code;
						this.orderInfo.default_pay_type.pay_way = this.orderInfo.pay[key].pay_way;
					}
				}
				this.pay_type_select_show_status = false;
			},
			switchoverDate(date){
				this.now_show_date = date.substr(0,date.lastIndexOf("("));
				this.$forceUpdate()
			},
			switchoverTime(date, time){
				for(var key in this.lists){
					if(this.lists[key].id == this.now_time_select_merchant_id){
						if(this.time_select_type == 1){
							this.now_show_date = date.substr(0,date.lastIndexOf("("));
							this.lists[key].dispatching_information.recent_date = date;
							this.lists[key].dispatching_information.recent_time = time;
						}else if(this.time_select_type == 2){
							this.now_show_date = date.substr(0,date.lastIndexOf("("));
							this.lists[key].canteen_information.recent_date = date;
							this.lists[key].canteen_information.recent_time = time;
						}
					}
				}
				this.$forceUpdate()
				this.time_select_show_status = false;
			},
			whetherToday(date){
				var d = new Date();
				if(date.lastIndexOf("(") != -1){
					date = date.substr(0,date.lastIndexOf("("))
				}
				var month = d.getMonth() + 1;
				if(month < 10){
					month = '0' + month;
				}
				
				if(date == month + '-' + (d.getDate())){
					return true;
				}else{
					return false;
				}
			}
		}
	}
</script>
<style lang="scss">
	.main-content{
		padding-bottom: 120rpx;
		.p-20{
			padding: 20rpx;
		}
		.select{
			display: flex;
			min-height: 24px;
			font-weight: bold;
			padding: 24rpx 20rpx;
			border-radius: 0 0 14rpx 14rpx;
			.left-content{
				width: 50%;
			}
			.right-content{
				width: 50%;
				text-align: right;
				
				.distribution-time{
					color: #1db0fc;
					padding-right: 10rpx;
				}
			}
		}
		.head{
			margin: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}
		.product-lists{
			.product-item{
				margin: 20rpx;
				margin-bottom: 0;
				border-radius: 20rpx;
				overflow: hidden;
				
				.merchant-name{
					color: #9e9e9e;
					padding: 20rpx;
					padding-bottom: 0;
				}
				
				.distribution-mode-selection-area{
					
					.item{
						width: 100%;
						text-align: center;
						margin-right: 20rpx;
						border-radius: 20rpx;
						background-color: #f6f6f6;
						
						&::last-child{
							margin-right: 0;
						}
					}
					
					.active{
						background: #1db0fc;
						color: #fff;
					}
				}
			}
		}
		.flex-rl {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		.totalbox{
			padding: 24rpx 0;
			line-height: 20px;
			align-items: flex-end;
			border-top: 2rpx solid #eee;
			margin: 0 24rpx;
			.left{
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 14px;
				color: #888;
				[class*="hxicon-"]{
					color: #aaa;
					margin-left: 4px;
					font-size: 16px;
				}
			}
			.right{
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				.yh{
					color: #ff5722;
					.txt{
						color: #000;
						font-size: 13px;
					}
					.fh{
						margin-left: 3px;
						font-size: 13px;
					}
					.num{
						font-size: 13px;
					}
				}
				.total{
					
					margin-left: 16px;
					color: #333;
					.txt{
						font-size: 12px;
					}
					.fh{
						margin-left: 3px;
						font-size: 12px;
					}
					.num{
						font-size: 20px;
					}
				}
			}
		}
		
		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			padding: 0 30rpx;
			box-sizing: content-box;
			padding-bottom: env(safe-area-inset-bottom);
			
			.submit-btn{
				background-color: #1db0fc;
				margin-left: 10px;
				line-height: 30px;
				height: 30px;
			}
		}
		
		.pay-way .title {
			padding: 20rpx 24rpx;
		}
		
		.pay-way .radio-group .item {
			height: 120rpx;
			padding: 0 24rpx;
		}
		
		.time-select-title{
			background-color: #eee;
			/* color: #333; */
			text-align: center;
			/* padding: 8px 0; */
			height: 80rpx;
			line-height: 80rpx;
		}
		.time-select-date{
			padding: 0 !important;
			height: 100%;
			background-color: #f3f4f6;
			
			.time-select-date-item{
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}
		}
		.time-select-time{
			height: 100%;
			overflow: auto;
			.time-select-time-item{
				line-height: 80rpx;
				margin-left: 20rpx;
				/* border-bottom: 1px solid #f3f4f6; */
				font-size: 12px;
			}
		}
	}
	.pop-title {
		height: 100rpx;
		border-bottom: 1rpx solid #F2F2F2;
	}
	
	.pop-title .title {
		margin-left: 30rpx;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 36rpx;
	}
</style>